<template>
  <!-- 随堂提问统计 -->
  <div id="atten-details">
    <div class="preview-top">
      <div class="preview-top1">
        <div class="preview-top-content">
          <div>
            <span class="preview-title">{{ classData.courseName }}</span>
            <span class="preview-line"></span>
            <span style="margin-right:10px;">{{ classData.name }}</span>
            <span>{{ classData.grade }}</span>
          </div>
        </div>
      </div>
    </div>
    <div class="jx-content">
      <div class="search-box fl">
        <el-form :inline="true" @submit.native.prevent>
          <el-form-item label="学生信息 :">
            <el-input v-model="userInfo" placeholder="请输入学号或姓名"></el-input>
          </el-form-item>
          <el-form-item>
            <div class="button-style" @click="getList">搜 索</div>
          </el-form-item>
        </el-form>
        <div class="search-box-option">
            <el-button
                :loading="fullMarksLoading"
                class="button-style"
                @click="setFullMarks"
            >
                满分设置
            </el-button>
            <el-button
                :loading="downLoading"
                class="button-style ml"
                @click="downLoad"
            >
                统计下载
            </el-button>
        </div>
      </div>
      <el-table v-loading="tableLoading" :data="list" style="width: 100%">
        <el-table-column type="index" width="55" label="序号"></el-table-column>
        <el-table-column prop="name" label="学生姓名"></el-table-column>
        <el-table-column prop="userNumber" label="学生学号"></el-table-column>
        <el-table-column label="简答题回答次数">
          <template slot-scope="scope">
            <div class="ts-c-blue">{{ scope.row.questionAnwserNum }}</div>
          </template>
        </el-table-column>
        <el-table-column label="简答题表现">
          <template slot-scope="scope">
            <span class="ts-c-qblue" style="margin-right:10px;">优{{ scope.row.questionAnwserType1Num }}</span>
            <span class="ts-c-yellow" style="margin-right:10px;">良{{ scope.row.questionAnwserType2Num }}</span>
            <span class="ts-c-red">差{{ scope.row.questionAnwserType3Num }}</span>
          </template>
        </el-table-column>
        <el-table-column label="判断题回答次数">
          <template slot-scope="scope">
            <div class="ts-c-blue">{{ scope.row.choiceAnwserNum }}</div>
          </template>
        </el-table-column>
        <el-table-column label="判断题表现">
          <template slot-scope="scope">
            <span class="ts-c-qblue" style="margin-right:10px;"><i class="iconfont icon-chenggong"></i> {{ scope.row.choiceAnwserType1Num }}</span>
            <span class="ts-c-red"><i class="iconfont icon-cuowu"></i> {{ scope.row.choiceAnwserType2Num }}</span>
          </template>
        </el-table-column>
        <el-table-column label="分数">
            <template slot-scope="scope">
                <el-input
                    v-model="scope.row.manifestScore"
                    maxlength="3"
                    @focus="setDefault(scope.row.manifestScore)"
                    @blur="change(scope)"
                >
                </el-input>
            </template>
        </el-table-column>
      </el-table>
    </div>
    <fullMarksDialog
        ref="fullMarksDialog"
    />
  </div>
</template>
<script>
import { getClasPerFullMark, setClassPerScore, exportClassPerData } from '../../../api/myCourse';
import fullMarksDialog from './components/fullMarksDialog';
import { downLoadFile } from '../../../utils/common';
import axios from "axios";
import $ from "jquery";
export default {
  components: {
      fullMarksDialog
  },
  data() {
    return {
      classId: this.$route.query.classId,
      courseId: this.$route.query.courseId,
      userInfo: '',
      list: [],
      tableLoading: true,
      classData:{
        courseName:'',
        grade:'',
        //班级名称
        name:'',
      },
      fullMarksLoading: false,
      defaultScore: null,
      downLoading: false,
      updateType: null
    };
  },
  created() {
      const { type } = this.$route.query;
      this.updateType = type ? true : false;

  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      this.getCourseName();
      this.getClassName();
      this.getList();
    },
    //获取课程名称
    getCourseName() {
      let self = this;
      let courseId = self.courseId;
      self.$http
        .get(`/tes/course/${courseId}/chapter/0`)
        .then((response) => {
          let res = response.data;
          if (res.code == "200") {
            console.log(res,223);
            self.classData.courseName = res.data.courseName;
          } else{
            self.$message.error(res.message)
          }
        })
        .catch((err) => {
          self.$message.error(err.message);
        });
    },
    //获取班级和年级名称
    getClassName() {
      let self = this;
      let classId = self.classId;
      self.$http
        .get(`/tes/course/class/${classId}`)
        .then((response) => {
          let res = response.data;
          if (res.code == "200") {
            self.classData.grade = res.data.grade;
            self.classData.name = res.data.name;
          } else{
            self.$message.error(res.message)
          }
        })
        .catch((err) => {
          self.$message.error(err.message);
        });
    },
    //获取列表数据
    getList() {
      let self = this;
      let classId = self.classId;
      let courseId = self.courseId;
      self.$http.post(`/tes/statistic/course/${courseId}/class/${classId}/detail`,{
        userInfo:self.userInfo,
        updateType: self.updateType
      })
        .then((response) => {
            self.tableLoading = false;
          let res = response.data;
          if (res.code == "200") {
            self.list = res.data;
          }else if(res.code == '404'){
            self.list = [];
            self.$message.error(res.message)
          }else{
            self.$message.error(res.message)
          }
        })
        .catch((err) => {
            self.tableLoading = false;
            self.$message.error(err.message);
        });
    },

    setFullMarks() {
        this.fullMarksLoading = true;
        getClasPerFullMark(this.courseId, this.classId).then((res) => {
            this.fullMarksLoading = false;
            this.$refs.fullMarksDialog.init(1, {
                fullMark: res.data,
                courseId: this.courseId,
                classId: this.classId
            });
        }).catch(() => {
            this.fullMarksLoading = false;
        });
    },

    setDefault(score) {
        this.defaultScore = score;
    },

    change(scope) {
        const { id, manifestScore } = scope.row;

        if (!/^[0-9]\d*$/.test(manifestScore)) {
            this.$message.error('请输入数字！');
            this.list[scope.$index].manifestScore = this.defaultScore;
            return false
        }
        if (manifestScore > 100) {
            this.list[scope.$index].manifestScore = this.defaultScore;
            this.$message.error('分数不能大于100！');
            return false;
        }

        const score = manifestScore.replace(/^[0]+/,"") || 0;

        this.list[scope.$index].manifestScore = score;


        setClassPerScore({
            id,
            score
        }, this.courseId, this.classId ).then((res) => {
            this.$message.success('设置成功！');
        }).catch(() => {
            this.list[scope.$index].manifestScore = this.defaultScore;
        });
    },

    downLoad() {
        this.downLoading = true;
        const name = `${this.classData.courseName}-随堂统计.xls`;
        const mimeType = 'application/vnd.ms-excel';
        exportClassPerData({
            userInfo: this.userInfo,
            classId: this.classId,
            courseId: this.courseId
        }, this.courseId, this.classId).then(async (res) => {
            this.downLoading = false;
            if (res.type == mimeType) {
                downLoadFile(new Blob([res]), name, mimeType);
            } else {
                const { message } = JSON.parse(await (new Response(res)).text());
                this.$message.error(message);
            }
        }).catch(() => {
            this.downLoading = false;
        });
    }
  },
};
</script>
<style lang="scss" scoped>
@import "../../../styles/img-init";
.jx-content {
    .search-box {
        display: flex;
        width: 100%;
        .search-box-option {
            margin-left: auto;
            .ml {
                margin-left: 8px;
            }
        }
    }

    .button-style {
        font-weight: 400;
    }
}
</style>
<style lang="scss">
@import "../../../styles/layout/color_variables";
#atten-details.isCreativeCourse {
  margin: 20px auto 30px;
}
#atten-details {
  box-shadow: 0px 0px 0px;
  border-radius: none;
  img {
    max-width: 80%;
  }
  .preview-top {
    position: relative;
    z-index: 1;
    height: 80px;
    margin: 0px auto 0;
    .preview-top1 {
      width: 100%;
      height: 60px;
      line-height: 60px;
      background: #101937;
      position: fixed;
      top: 0;
      color: #fff;
      font-size: 14px;
      .preview-top-content {
        width: 1200px;
        margin: 0 auto;
        span {
          margin-right: 40px;
        }
        .preview-title {
          font-size: 18px;
          margin-right: 0;
        }
        .preview-line {
          margin: 0 6px;
        }
      }
    }
  }
}

.jx-content {
    .el-table__body-wrapper {
        .el-input {
            width: 46px;
            height: 20px;
            line-height: 20px;
        }
        .el-input__inner {
            width: 100%;
            height: 20px;
            padding: 0 5px;
        }
    }

    .el-loading-mask {
        z-index: 0;
    }
}
</style>
